<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Simple Resize</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Simple Resize</h1>

    
        <a href="#toc" class="jump">Jump to Table of Contents</a>
    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p>This example shows the simple use case where we make an HTML element resizable.</p>
</div>

<div class="example">
    <style>
    #demo {
        height: 100px;
        width: 100px;
        border: 1px solid black;
        background-color: #8DD5E7;
        position: relative;
        padding: 1em;
        margin: 2em;
    }


</style>

<div id="demo">Resize Me</div>



<script>
YUI().use('resize', function(Y) {
    var resize = new Y.Resize({
        //Selector of the node to resize
        node: '#demo'
    });   
});


</script>


</div>

<h3 id="setting-up-the-node">Setting up the Node</h3>
<p>First we need to create an HTML element to make resizable.</p>

<pre class="code prettyprint">&lt;div id=&quot;demo&quot;&gt;Resize Me&lt;&#x2F;div&gt;</pre>


<p>Next, we give that element some CSS to make it visible.</p>

<pre class="code prettyprint">#demo {
    height: 100px;
    width: 100px;
    border: 1px solid black;
    background-color: #8DD5E7;
    position: relative;
    padding: 1em;
    margin: 2em;
}</pre>


<h3 id="setting-up-the-yui-instance">Setting up the YUI Instance</h3>
<p>We need to create our YUI instance and tell it to load the <code>resize</code> module; for this simple use case, we could also use the <code>base-resize</code> submodule.</p>

<pre class="code prettyprint">YUI().use(&#x27;resize&#x27;);</pre>


<h3 id="making-the-node-resizable">Making the Node Resizable</h3>

<p>Now that we have a YUI instance with the <code>resize</code> module, we need to instantiate the <code>Resize</code> instance on this Node.</p>

<pre class="code prettyprint">YUI().use(&#x27;resize&#x27;, function(Y) {
    var resize = new Y.Resize({
        &#x2F;&#x2F;Selector of the node to resize
        node: &#x27;#demo&#x27;
    });   
});</pre>


<p>Upon instantiation, the element's drag handles will appear and the element is resizable via drag-and-drop.</p>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            
                <div id="toc" class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Table of Contents</h2>
                    </div>

                    <div class="bd">
                        <ul class="toc">
<li>
<a href="#setting-up-the-node">Setting up the Node</a>
</li>
<li>
<a href="#setting-up-the-yui-instance">Setting up the YUI Instance</a>
</li>
<li>
<a href="#making-the-node-resizable">Making the Node Resizable</a>
</li>
</ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Resize a node.">
                                        <a href="simple-resize.html">Simple Resize</a>
                                    </li>
                                
                            
                                
                                    <li data-description="A simple resize implementation that utilizes the ResizeConstrained plugin to set min/max dimensions and to lock in the resized element&#x27;s aspect ratio.">
                                        <a href="constrain-resize.html">Constrain a Resize</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example shows an 8-way image resize, providing the CSS needed for a common image-resize visual treatment.">
                                        <a href="image-resize.html">8-way Image Resize</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Plugs a widget with resize functionality.">
                                        <a href="simple-resize-plugin.html">Widget with simple Resize Plugin</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Plugs a widget with resize functionality, and implements ResizeConstrained">
                                        <a href="constrain-resize-plugin.html">Widget with Resize Plugin under constraints</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
